<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>Camera Example</title>
   	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
   	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
   	<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
   	<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
   	<script src="../js/ajax.js"></script>
   </head>
        <div id="app">			
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<header>
				<van-row fixed="true">
					<van-search placeholder="请输入搜索关键词" background="red" show-action="true" v-model="sear" @search="onSearch">					
					</van-search>
				</van-row>				
			</header>
            <van-row>
                <van-col span="6">
                    <van-badge-group :active-key="activeKey" @change="onChange" >
                      <van-badge @click="change(item)" :title="item.Name" v-for="item in Categories">						  
                      </van-badge>
                    </van-badge-group>
                </van-col>
                <van-col span="18">
					<div style="margin: 10px;" v-for="(item,index) in products" @click="clickSkip(item.Id)">						
						<van-col span="12" >
							<div style="width: 100%;">
								<img :src="item.GoodsImageUrl" style="width: 100%;" alt="" onerror="this.src='../img/yjz.jpg'">
							</div>
							<div style="font-size: 14px">{{item.Name}}</div>
							<div>
								<span style="color: red;font-size: 18px;"> ￥{{item.RealPrice}}</span>
							</div>
							<div>
								<span style="font-size: 12px;color: #C8C9CC; "> {{item.VirtualSaleCount}}销量</span>
							</div>
							<div>
								<span style="font-size: 12px; color: #C8C9CC;"> {{item.BrowseCount}} 次浏览</span>
							</div>
						</van-col>
					</div>
                </van-col>
            </van-row>			
        </div>
        <script type="text/javascript">   
				Vue.use(VueLazyload, {
					error: "../img/yjz.jpg"
				});
        	var vm = new Vue({
        		el:"#app",
                data:{
                    activeKey:1,
                    Categories:[],
                    products:[],
					listname:[],
					sear: "",
					isLoading: false
                },
                methods:{
                    onChange:function(key){
                        this.activeKey = key;
                    },
                    change:function(item){
                        this.getProduct(this.Categories[this.activeKey].Id)
                    },
					clickSkip: function(index) {
						plus.webview.create("../shopknow/guym.html", "guym", {}, {
							shopId:index
						}).show();
					},
                    getCategories:function(){
                        var _this= this;
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/Categories",
                            dataType:"jsonp",
                            success:function(res){
                               _this.Categories = res.Categories;
                               _this.getProduct(_this.Categories[_this.activeKey].Id)
                            }
                        })
                    },
                    getProduct:function(id){
                        var _this = this;
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
                            dataType:"jsonp",
                            data:{
                              typeId:id, 
                              p:1  
                            },
                            success:function(res){
                                _this.products = res.Data;
                            }
                        })
                    },
					onSearch: function() {
						if (vm.sear == "") {
							vm.$toast("请输入内容");
							return;
						}
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsSearch",
							dataType: "jsonp",
							data: {
								name: vm.sear
							},
							"success": function(res) {
								vm.products = res.Data;					
							}
						})
					},
					onRefresh:function() {
						setTimeout(function() {							
								ajax({								
									url: "http://dsapi.ysd3g.com/api/GoodsByCategoryId",
									data: {
									},
									dataType: "jsonp",
									success: function(res) {
										// 商品列表					
										vm.products = res.Data;
									}
								})
							this.$toast('刷新成功');
							this.isLoading = false;
							this.count++;							
						}, 500);
					}
                },
                created:function() {
                	this.getCategories();
                }
        	})
        </script>
    </body>
</html>